<template>
  <div class="app-container">
    <div class="topform">
      <el-input style="width: 300px" clearable v-model="form.serchKeyword" v-focus placeholder="请输入搜索内容"
                autocomplete="off"/>
      <el-button type="primary" style="margin-left: 10px" :loading="btnloading" @click="getlistdata(true)"
                 icon="el-icon-search">搜索
      </el-button>
      <el-button type="primary" @click="adddialog=true" icon="el-icon-circle-plus-outline">添加</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              header-cell-class-name="tableheader">
      <el-table-column align="center" label="菜单名称">
        <template slot-scope="scope">
          {{ scope.row.m_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单路由">
        <template slot-scope="scope">
          {{ scope.row.route_url }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单类型">
        <template slot-scope="scope">
          {{ scope.row.menu_type_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        style="text-align: center"
        layout="prev, pager, next"
        small
        :current-page="form.page"
        :page-size="form.pagesize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <el-dialog title="新增菜单" :visible.sync="adddialog" width="35%">
      <el-form :model="addform" ref="addform" :rules="rule" label-width="100px">
        <el-form-item label="菜单名称：" prop="m_name">
          <el-input clearable v-model="addform.m_name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="路由地址：" prop="route_url">
          <el-input clearable v-model="addform.route_url" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="上级菜单：" prop="region">
          <el-select v-model="addform.parent_id" filterable clearable placeholder="请选择上级菜单">
            <el-option v-for="item in alllist" :label="item.m_name" :value="item.mid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型：" prop="menu_type">
          <el-switch
            v-model="addform.menu_type"
            active-text="Web"
            inactive-text="App"
            active-color="#409EFF"
            inactive-color="#409EFF"
            :active-value="0"
            :inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="菜单图标：" prop="region">
          <el-button v-if="addform.icon===''" type="warning" plain @click="addicondia=true">选择图标</el-button>
          <div v-else>
            <i :class="addform.icon" style="font-size: 8em" @click="addicondia=true"></i>
            <svg-icon :icon-class="addform.icon" style="font-size: 8em" @click="addicondia=true"></svg-icon>
          </div>
        </el-form-item>
        <el-dialog
          width="50%"
          top="2%"
          title="选择Icon"
          :visible.sync="addicondia"
          append-to-body>
          <p style="font-size: 25px">Svg:</p>
          <svg-icon v-for="item in svgIcons"
                    :icon-class="item"
                    style="font-size: 35px;margin: 15px"
                    @click="addicon(item)"
          ></svg-icon>
          <p style="font-size: 25px">Element:</p>
          <i v-for="item in elementIcons"
             :class="item"
             style="font-size: 35px;margin: 15px"
             @click="addicon(item)"
          ></i>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addbtn">确 定 添 加</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑菜单" :visible.sync="editdialog" width="35%">
      <el-form :model="editform" ref="editform" :rules="rule" label-width="100px">
        <el-form-item label="菜单名称：" prop="m_name">
          <el-input v-model="editform.m_name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="路由地址：" prop="route_url">
          <el-input v-model="editform.route_url" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="上级菜单：" prop="region">
          <el-select v-model="editform.parent_id" filterable clearable placeholder="请选择上级菜单">
            <el-option v-for="item in alllist" :label="item.m_name" :value="item.mid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型：" prop="menu_type">
          <el-switch
            v-model="editform.menu_type"
            active-text="Web"
            inactive-text="App"
            active-color="#409EFF"
            inactive-color="#409EFF"
            :active-value="0"
            :inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="菜单图标：" prop="region">
          <el-button v-if="editform.icon===null" type="warning" plain @click="editicondia=true">选择图标
          </el-button>
          <div v-else>
            <i :class="editform.icon" style="font-size: 8em" @click="editicondia=true"></i>
            <svg-icon :icon-class="editform.icon" style="font-size: 8em"
                      @click="editicondia=true"></svg-icon>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="editform.sort" type="number" autocomplete="off"/>
        </el-form-item>
        <el-dialog width="50%" top="2%" title="选择Icon" :visible.sync="editicondia" append-to-body>
          <p style="font-size: 25px">Svg:</p>
          <svg-icon v-for="item in svgIcons" :icon-class="item" style="font-size: 35px;margin: 15px"
                    @click="editicon(item)"></svg-icon>
          <p style="font-size: 25px">Element:</p>
          <i v-for="item in elementIcons" :class="item" style="font-size: 35px;margin: 15px"
             @click="editicon(item)"></i>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editbtn">确 定 修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import svgIcons from '../../components/icons/svg-icons';
import elementIcons from '../../components/icons/element-icons';

export default {
  data() {
    return {
      btnloading: false,
      svgIcons,
      elementIcons,
      form: {
        serchKeyword: '',
        page: 1,
        pagesize: 20
      },
      addform: {
        m_name: '',
        route_url: '',
        parent_id: '',
        icon: '',
        menu_type: 0,
      },
      editform: {
        mid: '',
        m_name: '',
        route_url: '',
        parent_id: '',
        icon: '',
        menu_type: 0,
        sort:'',
      },
      rule: {
        m_name: [
          {required: true, message: '此项为必填项'},
        ],
        route_url: [
          {required: true, message: '此项为必填项'},
        ],
        menu_type: [
          {required: true, message: '此项为必填项'},
        ],
      },
      list: null,
      alllist: null,
      total: 0,
      listLoading: true,
      adddialog: false,
      editdialog: false,
      addicondia: false,
      editicondia: false,
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  created() {
    this.getlistdata();
    this.getalllist();
  },
  methods: {
    getlistdata(isquery) {
      this.listLoading = true;
      if (isquery === true) {
        this.form.page = 1
      }
      this.$post(this.$api + '/System/Role/GetMenuList', {
        'serchKeyword': this.form.serchKeyword,
        'page': this.form.page,
        'pagesize': this.form.pagesize
      }, false, this)
        .then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getalllist() {
      this.$post(this.$api + '/System/Role/GetMenuList', {
        'ispage': false,
      })
        .then((res) => {
          if (res.code === 0) {
            this.alllist = res.rows;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    addicon(item) {
      this.addform.icon = item;
      this.addicondia = false;
    },
    editicon(item) {
      this.editform.icon = item;
      this.editicondia = false;
    },
    addbtn() {
      this.listLoading = true;
      this.$post(this.$api + '/System/Role/SaveMenu', {
        'm_name': this.addform.m_name,
        'route_url': this.addform.route_url,
        'parent_id': this.addform.parent_id,
        'icon': this.addform.icon,
        'menu_type': this.addform.menu_type,
      })
        .then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.$notify({
              title: '成功',
              message: res.msg,
              type: 'success'
            });
            this.adddialog = false;
            this.addform = {
              m_name: '',
              route_url: '',
              parent_id: '',
              icon: '',
              menu_type: 0,
            };
            this.getlistdata();
            this.getalllist();
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    openedit(item) {
      this.listLoading = true;
      this.$get(this.$api + '/System/Role/GetMenuModel', {
        'mid': item.mid
      })
        .then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.editform = res.data;
            this.editdialog = true;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    editbtn() {
      this.listLoading = true;
      this.$post(this.$api + '/System/Role/SaveMenu', {
        'mid': this.editform.mid,
        'm_name': this.editform.m_name,
        'route_url': this.editform.route_url,
        'parent_id': this.editform.parent_id,
        'icon': this.editform.icon,
        'menu_type': this.editform.menu_type,
        'sort':this.editform.sort
      })
        .then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.$notify({
              title: '成功',
              message: res.msg,
              type: 'success'
            });
            this.editdialog = false;
            this.getlistdata();
            this.getalllist();
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    delbtn(item) {
      this.$confirm('确认删除？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$get(this.$api + '/System/Role/DelMenu', {
          'mid': item.mid
        })
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.getlistdata();
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      })
    },
    handleSizeChange(v) {
      this.form.pagesize = v;
      this.getlistdata();
    },
    handleCurrentChange(v) {
      this.form.page = v;
      this.getlistdata();
    }
  }
};
</script>

